<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline" @submit="handleSubmit">
      <a-row :gutter='24'>
        <template v-for="(item,i) in columns">
          <!--隐藏-->
          <template v-if="item.hidden">
            <a-col :lg="3" :md='6' :xs='12' :sm="24" :key="i" v-show="toggleSearchStatus">
              <a-form-item>
                <component
                  :type="item.type"
                  :is="getComponent(item.type)"
                  :placeholder="item.placeholder || item.title || ''"
                  v-model="queryParam[item.field]"
                  :format="item.format"
                  :dic="item.options"/>
              </a-form-item>
            </a-col>
          </template>
          <template v-else>
            <a-col :lg="3" :md='6' :xs='12' :sm="24" :key="i">
              <a-form-item>
                <component
                  :type="item.type"
                  :is="getComponent(item.type)"
                  :format="item.format"
                  :placeholder="item.placeholder || item.title || ''"
                  v-model="queryParam[item.field]"
                  :dic="item.options"/>
              </a-form-item>
            </a-col>
          </template>

        </template>
        <a-col :md="3" :sm="24" class="table-page-search-submitButtons" style='float: right'>
          <a @click="handleToggleSearch" style="margin-left: 8px" v-if="queryObj.hidden || false">
            {{ toggleSearchStatus ? '收起' : '展开' }}
            <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
          </a>
          <a-button htmlType="submit" type="primary">查询</a-button>
          <a-button @click="searchReset" style="margin-left: 8px">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>/**
 * 数据结构
 * queryObj: {
 *   columns: [
 *     {
 *       label: '用户名',
 *       value: 'username',
 *       type: 'input',
 *       hidden: true,
 *       placeholder: ''
 *     }
 *   ]
 * }
 */
import Vue from 'vue'

export default {
  name: 'QueryTools',
  props: {
    queryObj: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      toggleSearchStatus: false,
      isShow: false,
      queryParam: {}
    }
  },
  computed: {
    columns () {
      return this.queryObj.columns.filter(item => {
        return !item.nosearch
      })
    },
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.searchByquery()
    },
    handleToggleSearch () {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    searchByquery () {
      console.log(this.queryParam,'this.queryParam')
      this.$emit('ok', this.queryParam)
    },
    searchReset () {
      this.queryParam = {}
      this.$emit('ok', this.queryParam)
    },
    getComponent (type) {
      let result = 'a-input'
      if (type === 'select') {
        result = 'biz-select'
      } else if (type === 'input') {
        result = 'biz-input'
      } else if (type === 'date') {
        result = 'biz-date'
      }
      return result
    },
  }
}
</script>

<style scoped>

</style>
